<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.basic {
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}

			.happy {
				background-color: orange;
			}

			.sad {
				background-color: gray;
			}

			.normal {
				background-color: skyblue;
			}

			.box1 {
				border: 3px solid pink;
			}

			.box2 {
				border: 3px dashed red;
			}

			.box3 {
				border: 3px solid purple;
			}
		</style>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<!-- 绑定class样式---字符串写法 -->
			<div class="basic" :class="a" @click="change">{{name}}</div><br><br>
			<!-- 绑定class样式---数组写法 -->
			<div class="basic" :class="arr[2]" @click="change">{{name}}</div><br><br>
			<!-- 绑定class样式---对象写法 -->
			<div class="basic" :class="obj.box1=true" @click="change">{{name}}</div><br><br>
			<!-- 绑定style样式 -->
			<div class="basic" :style=styleObj>{{name}}</div>

		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#root',
				data: {
					name: '邹宜臻',
					a: 'normal',
					arr: ['box1', 'box2', 'box3'],
					obj: {
						box1: false,
						box2: false
					},
					styleObj: {
						fontSize: 40 + 'px',
						color: 'orange'
					}
				},
				methods: {
					change() {
						const mood = ['happy', 'sad', 'normal']
						this.a = mood[Math.floor(Math.random() * 3)]
					}
				}
			})
		</script>
	</body>
</html>
